<template>
  <div>
    <div class="container" id="container">
      <div class="vip-one">
        <template v-if="Object.keys(userinfo).length > 0">
          <van-image width="66" height="66" fit="cover" round :src="userinfo.headimgurl" />
          <p class="vip-one-name">{{ userinfo.account }}</p>
          <p class="vip-one-card">
            <span v-if="agent_level == 2 && dis_level == 2">游客</span>
            <span v-if="agent_level == 2 && dis_level == 1">养殖户</span>
            <span v-if="agent_level == 1">{{ dlsname }}</span>
            <span>ID:{{ userinfo.user_id }}</span>
            <span>金猪币:￥{{ balance }}</span>
          </p>

        </template>
        <template v-else>
          <van-image width="66" height="66" fit="cover" round :src="defaultimg" />
          <button class="vip-one-btn" @click="bindLogin">去登录</button>
        </template>
      </div>

      <div class="vip-two flexs">
        <div class="vip-two-item" @click="bindOrder">
          <van-image width="46" height="46" fit="cover" round :src="require('../assets/images/a42.png')"></van-image>
          <p>我的订单</p>
        </div>
        <div class="vip-two-item" @click="bindShopOrder">
          <van-image width="46" height="46" fit="cover" round :src="require('../assets/images/a41.png')"></van-image>
          <p>商城订单</p>
        </div>
        <div class="vip-two-item" @click="bindzc">
          <van-image width="46" height="46" fit="cover" round :src="require('../assets/images/a21.png')"></van-image>
          <p>我的资产</p>
        </div>
        <div class="vip-two-item" @click="bindtg">
          <van-image width="46" height="46" fit="cover" round :src="require('../assets/images/a20.png')"></van-image>
          <p>推广二维码</p>
        </div>
      </div>

      <div class="vip-three">
        <div class="vip-three-item flexs" @click="bindzh">
          <div class="vip-three-left">
            <i class="iconfont icon-shezhi"></i>
            <span>账号管理</span>
          </div>
          <div class="vip-three-right">
            <i class="iconfont icon-changyongicon-"></i>
          </div>
        </div>
        <!--分销商-->
        <!-- <div class="vip-three-item flexs" @click="bindFx" v-show="dis_level == 1">
                    <div class="vip-three-left">
                        <i class="iconfont icon-fenxiao"></i>
                        <span>分销商中心</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div> -->
        <!--订货商-->
        <!-- <div class="vip-three-item flexs" @click="bindDl" v-show="indent_level == 1">
                    <div class="vip-three-left">
                        <i class="iconfont icon-liuliangyunpingtaitubiao03"></i>
                        <span>订货商中心</span>
                    </div>
                    <div class="vip-three-right">
                        <i class="iconfont icon-changyongicon-"></i>
                    </div>
                </div> -->

        <!-- <div class="vip-three-item flexs" @click="bindApply" v-show="agent_level == 2">
					<div class="vip-three-left">
						<i class="iconfont icon-shenqingguanli"></i>
						<span>申请代理商</span>
					</div>
					<div class="vip-three-right">
						<i class="iconfont icon-changyongicon-"></i>
					</div>
				</div> -->
        <div class="vip-three-item flexs" @click="bindkf">
          <div class="vip-three-left">
            <i class="iconfont icon-custom-service"></i>
            <span>专属客服</span>
          </div>
          <div class="vip-three-right">
            <i class="iconfont icon-changyongicon-"></i>
          </div>
        </div>
        <div class="vip-three-item flexs" @click="bindwt">
          <div class="vip-three-left">
            <i class="iconfont icon-wenti"></i>
            <span>常见问题</span>
          </div>
          <div class="vip-three-right">
            <i class="iconfont icon-changyongicon-"></i>
          </div>
        </div>
        <div class="vip-three-item flexs" @click="bindgy">
          <div class="vip-three-left">
            <i class="iconfont icon-guanyuwomen"></i>
            <span>关于我们</span>
          </div>
          <div class="vip-three-right">
            <i class="iconfont icon-changyongicon-"></i>
          </div>
        </div>
        <div class="vip-three-item flexs" @click="bindlx">
          <div class="vip-three-left">
            <i class="iconfont icon-xinxi small"></i>
            <span>联系我们</span>
          </div>
          <div class="vip-three-right">
            <i class="iconfont icon-changyongicon-"></i>
          </div>
        </div>
      </div>
      <div class="height30"></div>
    </div>

    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from "@/components/template/tabbar.vue";
import { _debounce, judgeUrl, getUrlParam } from "@/common/utils.js";
export default {
  data() {
    return {
      defaultimg: require("../assets/images/a19.png"),
      userinfo: {},
      agent_level: 2,
      dis_level: 2,
      indent_level: 2,
      balance: null,
      dlsname: ""
    };
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute(
        "style",
        "background-color:#fff;position:fixed;width:100%;height:100%;top:0;left:0"
      );
    // 获取浏览器可视区域高度
    var clientHeight = `${document.documentElement.clientHeight}`;
    var zzgd = clientHeight - 60;
    document.getElementById("container").style.height = zzgd + "px";
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  created() {
    //获取用户信息
    let userinfo = this.$store.state.userinfo;

    if (userinfo) {
      this.userinfo = userinfo;
      if (this.agent_level == 2) {
        this.$toast.loading({
          message: "加载中...",
          duration: 30000
        });
        this.get_dls();
      }
    }
  },
  components: {
    MyTabbar
  },
  methods: {
    //分销
    bindFx() {
      judgeUrl(this.userinfo, "/distributor/distributCenter", this);
      // this.$router.push('/distributor/distributCenter');
    },

    //订货
    bindDl() {
      judgeUrl(this.userinfo, "/agency/agentCenter", this);
      // this.$router.push('/agency/agentCenter');
    },

    //商城订单
    bindShopOrder: _debounce(function() {
      this.$toast("该商城功能后期开放");
      // judgeUrl(this.userinfo, '/shop/shopOrder', this);
    }, 100),

    //我的订单
    bindOrder() {
      judgeUrl(this.userinfo, "/order", this);
    },

    //我的资产
    bindzc() {
      if (this.agent_level == 2 && this.dis_level == 2) {
        this.$toast("请先购买产品或联系客服！");
      } else {
        judgeUrl(this.userinfo, "/property", this);
      }
    },
    //推广二维码
    bindtg() {
      judgeUrl(this.userinfo, "/promote", this);
    },
    //账号设置
    bindzh() {
      judgeUrl(this.userinfo, "/setup", this);
    },
    //申请代理商
    bindApply() {
      judgeUrl(this.userinfo, "/applyAgent", this);
    },
    //专属客服
    bindkf() {
      this.$router.push("/service");
    },
    //常见问题
    bindwt() {
      this.$router.push("/problem");
    },
    //关于我们
    bindgy() {
      this.$router.push("/about");
    },
    //联系我们
    bindlx() {
      this.$router.push("/contact");
    },
    bindLogin() {
      this.$router.push("/login");
    },

    //获取代理商状态
    get_dls() {
      var that = this;
      let userinfo = that.userinfo;
      that.$axios
        .get("/userinfo", {
          params: {
            user_id: userinfo.user_id
          },
          headers: {
            token: userinfo.api_token
          }
        })
        .then(res => {
          that.$toast.clear();
          var codes = res.data.code;
          if (codes == 1001) {
            var arrs = res.data.result;
            that.balance = arrs.balance;
            that.agent_level = arrs.agent_level;
            that.dis_level = arrs.dis_level;
            that.indent_level = arrs.indent_level;
            if (that.agent_level == 1) {
              that.dlsname = arrs.agent_user.dlname;
            }
          } else {
            that.$dialog
              .alert({
                title: "温馨提示",
                message: "您还未登录或登录状态失效，请登录后再来操作"
              })
              .then(() => {
                that.$router.push("/login");
              });
          }
        })
        .catch(function(error) {
          console.log("error", error);
        });
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
}

.vip-one-card {
  width: 100%;
  height: 34px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.vip-three {
  margin-top: 18px;
  padding-left: 3%;
}

.vip-three-item {
  border-bottom: 1px solid #f6f6f6;
  height: 50px;
}

.vip-three-left {
  display: flex;
  align-items: center;
}

.vip-three-right {
  padding-right: 2%;
}

.vip-three-right i {
  color: #c0c0c0;
  font-size: 18px;
}

.vip-three-left i {
  color: #41d08c;
  font-size: 22px;
  padding-top: 2px;
}

.vip-three-left i.small {
  font-size: 18px;
  margin-left: 4px;
}

.vip-three-left i.icon-shezhi {
  font-size: 20px;
}

.vip-three-left span {
  color: #333;
  font-size: 16px;
  margin-left: 14px;
}

.van-cell__left-icon {
  font-size: 30px;
}

.vip-two-item {
  flex: 1;
  text-align: center;
}

.vip-two-item p {
  color: #555;
  font-size: 14px;
}

.vip-two {
  background: #fff;
  border-radius: 10px;
  min-width: 90%;
  max-width: 94%;
  margin: 0 auto;
  z-index: 11;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  height: 100px;
  margin-top: -28px;
}

.vip-one {
  width: 100%;
  height: 200px;
  background: url(../assets/images/a18.jpg) no-repeat center center;
  background-size: cover;
  z-index: -1;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #f5f5f5;
}

.vip-one .van-image {
  margin-top: 20px;
  margin-bottom: 10px;
}

.vip-one p.vip-one-name {
  font-size: 16px;
  height: 21px;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.vip-one span {
  min-width: 60px;
  border: 1px solid #fff;
  font-size: 13px;
  border-radius: 20px;
  text-align: center;
  padding: 1px 5px;
  margin-left: 10px;
  height: 18px;
  line-height: 1.6;
}

.vip-one-btn {
  border: 0;
  outline: none;
  background: none;
  border: 1px solid #fff;
  font-size: 14px;
  width: 80px;
  height: 30px;
  margin: 0 auto;
  border-radius: 5px;
}
</style>



// WEBPACK FOOTER //
// src/components/center.vue
